<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width:150px;
            height:150px;
            background-color: #7db20c;
            margin-bottom: 20px;
        }
        .box2{
            width:150px;
            height:150px;
            background-color: #8b005f;

           /* box1,box2上下间的距离只能设置一个，因为只有一个会生效
           margin-top: 40px;*/
        }
        /*嵌套盒子的外边距合并问题*/
        .box{
            width:500px;
            height:500px;
            background-color: darkblue;
            margin-top:20px;
            /*给父盒子设置border ,改变了盒子的大小*/
           /* border:1px solid red*/

            /*给父盒子设置padding，改变了盒子的大小*/
            /*padding: 1px;*/

            /*不会影响盒子的大小，但是溢出的内容会被剪裁*/
            overflow: hidden;

        }
        .middle{
            /*如果不解决(父元素使用overflow)，那么给子标签设置的margin-top实际上设置到了父级容器上
            若二者都设置margin-top,则以较大的稳准，小的被合并了
            */
            margin-top:40px;
            width:150px;
            height:150px;
            background-color: darkcyan;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<hr>
<div class="box">
    <div class="middle"></div>
</div>
</body>
</html>